<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FluentUI.Demo.Client</title>
    <base href="/" />
    <link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />
    <style>
        :root {
            --neutral-fill-layer-rest: #ffffff;
            color: #000000;
        }

        .loading-progress-text {
            color: #000000;
        }

        @media(prefers-color-scheme: dark) {
            :root {
                --neutral-fill-layer-rest: #464646;
                color: #ffffff;
            }

            .loading-progress-text {
                color: #ffffff;
            }
        }

        body,
        #container {
            font: 14px "Segoe UI Variable", "Segoe UI", sans-serif;
            background-color: var(--neutral-fill-layer-rest);
        }
    </style>
    <link href="FluentUI.Demo.Client.styles.css" rel="stylesheet" />

    <!-- highlight -->
    <link rel="stylesheet" title="light" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.6.0/styles/vs.min.css">
    <link rel="stylesheet" title="dark" disabled="disabled" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.6.0/styles/vs2015.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.3/dist/highlightjs-copy.min.css">
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VML6BZWWTC"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-VML6BZWWTC');
    </script>
    <script type="text/javascript">
        (function (c, l, a, r, i, t, y) {
            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
            t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
            y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
        })(window, document, "clarity", "script", "hnr14wvzj8");
    </script>
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="js/site.js"></script>
    <script src="_content/FluentUI.Demo.Shared/js/theme.js" type="module"></script>

    <!-- highlight -->
    <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlightjs-cshtml-razor@2.1.1/dist/cshtml-razor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.3/dist/highlightjs-copy.min.js"></script>
    <script>
        if (hljs != null) {
            hljs.addPlugin(new CopyButtonPlugin());
        }
    </script>
</body>

</html>
